<template>
	<div class="gonglve">
		<div v-if="type" class="header flex flex_between flex_align">
			<div class="lefr" @click-left="back">
				<van-icon size="20" class-prefix="icon" name="back"></van-icon>
			</div>
			<div>
				 去哪儿攻略
			</div>
			<div class="lefr">
				<van-icon size="20" class-prefix="icon" name="gonglve" style="transform: translateY(5px);display: inline-block;"></van-icon>
				<div class="font-size-12">
					我的游记
				</div>
			</div>
		</div>
		<div v-else="type" class="header flex flex_between flex_align">
			<div class="lefr" @click="focus">
				<van-icon size="20" class-prefix="icon" name="back"></van-icon>
			</div>
			<div>
				 目的地搜索
			</div>
			<div style="">
			</div>
		</div>
		<div class="seaech" v-if="type">
			<van-search
			  v-model="value"
			  background="#25a4bb"
			  input-align="center"
			  placeholder="请输入目的地进行搜索"
			  @focus="focus"
			/>
			<div class="content">
				<van-swipe height="170" @change="lunboqie"> 
				  <van-swipe-item v-for="(image, index) in images" :key="index">
				    <van-image
					    width="100%"
						height="100%"
						fit="cover"
				        :src="image.url"
				    />
					<div class="swipe-title absolute font-size-14">
						{{image.title}} 
					</div>
					<div class="text_bg absolute"></div>
					</van-swipe-item>
					<template #indicator>
					  <div class="absolute zhishi">
						  <span class="custom-indicator " v-for="item,i in images" :key="i" :class="index==i?'current':''"></span>
					  </div>
					</template>
				</van-swipe>
				<div class="flex tag">
					<div class="color-1ba">
						去哪儿旅行榜
					</div>
				</div>
				<div class="dingwei border-top flex flex_between font-size-14 color-1ba">
					<div class="dw-left "><van-icon  class-prefix="icon" name="dingwei" style="margin-right: 10px;"></van-icon>{{adders||请开启定位服务}}</div>
					<div>
						重新点位
					</div>
				</div>
				<table class="border-top tab-list" cellspacing="0" cellpadding="0" v-show="zui.length>0">
					<tr >
						<th colspan="4" class="zuijiun relative font-size-14">
							最近浏览
						</th>
					</tr>
					<tr>
						<td>{{zui[0].name}}</td>
						<td>{{zui[1].name}}</td>
						<td>{{zui[2].name}}</td>
						<td>{{zui[3].name}}</td>
					</tr>
				</table>
				<table class="border-top tab-list" cellspacing="0" cellpadding="0" v-show="chense.length>0">
					<tr >
						<th colspan="4" class="zuijiun relative font-size-14">
							国内热门
						</th>
					</tr>
					<tr class="flex " style="flex-wrap: wrap;">
						<div class="tab" v-for="item,i in chense" :key="i" @click="naveeng">{{item.name}}</div>
					</tr>
				</table>
				<div class="mory color-1ba text_center">查看更多</div>
				<table class="border-top tab-list" cellspacing="0" cellpadding="0" v-show="englist.length>0">
					<tr >
						<th colspan="4" class="zuijiun relative font-size-14">
							国外热门	
						</th>
					</tr>
					<tr class="flex " style="flex-wrap: wrap;">
						<div class="tab" v-for="item,i in englist" :key="i" @click="naveeng">{{item.name}}</div>
					</tr>
				</table>
				<div class="mory color-1ba text_center">查看更多</div>
				
				<div class="border-top tese">
					<p>特色玩法</p>
					<div class="flex">
						<div style="height:241px; flex:1;margin-right:10px;" class="relative">
							<van-image
							  width="100%"
							  height="100%"
							  fit="cover"
							  radius="4"
							  :src="playlist[0].pic"
							/>
							<div class="absolute tit">
								{{playlist[0].tit}}
							</div>
							<div class="absolute title">
								{{playlist[0].title}}
							</div>
						</div>
						<div style="flex: 1; display: flex; flex-direction: column;justify-content: space-between;">
							<div class="relative">
								<van-image
								  width="100%"
								  height="100%"
								  fit="cover"
								  radius="4"
								  :src="playlist[1].pic"
								/>
								<div class="absolute tit">
									{{playlist[0].tit}}
								</div>
								<div class="absolute title">
									{{playlist[0].title}}
								</div>
							</div>
							<div class="relative">
								<van-image
								  width="100%"
								  height="100%"
								  radius="4"
								  fit="cover"
								  :src="playlist[2].pic"
								/>
								<div class="absolute tit">
									{{playlist[2].tit}}
								</div>
								<div class="absolute title">
									{{playlist[2].title}}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="border-top cont ">
					<div class="title flex">
						<div class="title-left"></div>
						<div>精彩内容</div> 
						<div class="title-right"></div>
					</div>
					<div style="margin-top: 20px;">
						<div v-for="item in contlist" class="cont-list"  @click="togonglv(item)">
							<div >
								<div style="font-size: 17px;">
									{{item.title}}
								</div>
								<div class="userinfo flex">
									<van-image style="margin-right: 10px;" round width="22" height="22"  :src="item.active"></van-image>
									<span>{{item.username}}</span>
								</div>
								<div v-if="item.images.length>1" class="imgs flex flex_between">
									<van-image width="112" height="94" radius="3" fit="cover" v-for="img in item.images" :src="img"></van-image>
								</div>
								<div v-else>
									<van-image width="100%" height="188" radius="3" fit="cover" v-for="img in item.images" :src="img"></van-image>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="seaechw" v-else>
			<van-search
			  v-model="value"
			  show-action
			  background="#25a4bb"
			  @search="onSearch"
			>
			  <template #action>
				  <div style="width: 50px;color: var(--color-write);">
					  <van-icon size="20" name="search" @click="onSearch"/>
				  </div>
			  </template>
			</van-search>
		</div>
		
	</div>
</template>

<script>
	import { Lazyload } from 'vant';
	import {getbann,chenselist,contentdata} from "@/api/liuhao/index"
	export default{
		name:"touch",
		data() {
			return{
				value:null,
				type:true,
				index:0,
				adders:"西安",
				zui:[
					{id:1,name:"西安"},
					{id:2,name:"西安"},
					{id:2,name:"西安"},
					{id:2,name:"西安"},
				],
				contlist:[],
				images:[],
				chense:[],
				playlist:[],
				englist:[{id:1,name:"西安"},{id:1,name:"西安"},{id:1,name:"西安"},{id:1,name:"西安"}]
			}
		},
		created() {
			this.getbanner()
			this.getchenselist()
			this.getcontentdata()
		},
		methods:{
			togonglv(item){
				this.$router.push("/youji/"+item.id)
			},
			lunboqie(index){
				this.index = index
			},
			focus(){
				this.type = !this.type
			},
			naveeng(){
				
			},
			onSearch(){
				
			},
			back(){
				this.$router.go(-1)
			},
			getbanner(){
				getbann().then(res=>{
					this.images = res.data.banner
					this.playlist = res.data.playlist
				})
			},
			getchenselist(){
				chenselist().then(res=>{
					this.chense = res.data.cheslist
					this.englist = res.data.englist
				})
			},
			getcontentdata(){
				contentdata().then(res=>{
					this.contlist = res
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	div{
		box-sizing: border-box;
	}
	.border-top{
		border-top: 5px solid #f3f3f3;
	}
	.seaech ::v-deep .van-field__left-icon{
		position: absolute;
		left: 70px;
	}
	.seaechw ::v-deep .van-search__action:active{
		background-color:transparent ;
	}
	.gonglve{
		font-size: var(--my-font-size);
		.header{
			height: 45px;
			padding: 0 10px;
			color: var(--color-write);
			background-color: var(--gl-bgc-color);
			.lefr{
				text-align: center;
				min-width: 45px;
			}
			.font-size-12{
				font-size: var(--my-font-size-12);
			}
		}
		.seaech{
			.text_bg{
				background-image: url(	https://source.qunarzz.com/site/images/travel/touch/switchtxt_bg.png);
				background-size: 100% 50px;
				width: 100%;
				height: 50px;
				bottom: 0;
			}
			.swipe-title{
				bottom: 5px;
				left: 10px;
				width: 100%;
				color: var(--color-write);
				z-index: 10;
				text-align: left;
			}
			.zhishi{
				bottom: 10px;
				right: 10px;
			}
			.custom-indicator{
				display: inline-block;
				width: 4px;
				border-radius: 50%;
				height: 4px;
				opacity: 0.5;
				margin-right: 1px;
				background-color: var(--color-write);
			}
			.current{
				opacity: 0.9;
			}
			.tag{
				background-color: var(--color-write);
				div{
					width: 50%;
					text-align: center;
					padding: 10px 0;
					border-bottom: 1px solid #e7e7e5;
					border-right: 1px solid #e7e7e5;
				}
			}
			.dingwei{
				padding:5px 10px;
			}
			.tab-list{
				width: 100%;
				overflow: hidden;
				.zuijiun{
					height: 30px;
					padding: 0 0 0 10px;
					border-bottom: solid 1px #e7e7e5;
					text-align: left;
					color: #333;
					font-weight: 500;
				}
				td,.tab{
					box-sizing: border-box;
					width: 25%;
					border: solid 1px #e7e7e5;
					border-width: 0 1px 1px 0;
					text-align: center;
					line-height: 39px;
					font-size: 15px;
				}
			}
			.mory{
				font-size: 15px;
				padding:12px 0 ;
			}
			.tese{
				padding:20px 15px;
				p{
					font-size: 23px;
					color: #333;
					margin-bottom: 15px;
				}
				.tit{
					top: 5px;
					right: 5px;
					font-size: 11px;
					background: #fff;
					padding: 1px 5px;
					border-radius: 2px;
				}
				
				.title{
					bottom: 0;
					left: 0;
					width: 100%;
					color: #fff;
					padding:10px;
					background-image: linear-gradient(-180deg,rgba(68,99,35,0) 0, rgba(68,99,35,1) 100%);
					border-radius: 4px;
				}
			}
			.cont{
				padding: 25px 15px;
				.title{
					position: relative;
					justify-content: center;
					font-size: 23px;
					.title-left,.title-right{
						position: relative;
						width: 50px;
					}
					.title-left::before{
						content: '';
						height: 16px;
						width: 5px;
						background: #f46bb5;
						position: absolute;
						top: 50%;
						left: 0;
						margin-top: -8px;
						transform: rotate(-339deg);
						border-radius: 5px;
					}
					.title-left::after{
						content: '';
						height: 24px;
						width: 8px;
						background: #b15af7;
						position: absolute;
						top: 50%;
						left: 15px;
						margin-top: -12px;
						transform: rotate(-340deg);
						border-radius: 5px;
					}
					.title-right::before{
						content: '';
						height: 16px;
						width: 5px;
						background: #f46bb5;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -8px;
						transform: rotate(-339deg);
						border-radius: 5px;
					}
					.title-right::after{
						content: '';
						height: 24px;
						width: 8px;
						background: #b15af7;
						position: absolute;
						top: 50%;
						right: 15px;
						margin-top: -12px;
						transform: rotate(-340deg);
						border-radius: 5px;
					}
				}
				.cont-list{
					border-bottom: 1px solid #eaeaea;
					padding-bottom: 15px;
					margin-bottom: 20px;
					.userinfo{
						margin:12px 0;
						align-items: center;
						font-size: 14px;
						color: #999;
					}
					.imgs{
						width: 100%;
					}
				}
			}
		}
	}
	
	
</style>